<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8"/>
    <title>layui</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/lib/layui-v2.5.4/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"/>
    <link rel="stylesheet" href="/css/public.css" media="all"/>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;

        }

        .layuimini-container {
            border: 1px solid #f2f2f2;
            border-radius: 5px;
            background-color: #dfe8f6;
            border-color: #b5b8c8 !important;
        }

        .layui-elem-field, .layui-input {
            border-color: #b5b8c8 !important;
        }

        .layui-elem-field legend {
            color: #15428b;
            font: bold 14px tahoma, arial, helvetica, sans-serif;
        }

        .layui-form-label {
            padding: 4px 10px !important;
            width: 80px;
        }

        .layui-input, .layui-select, .layui-textarea {
            height: 30px !important;
            line-height: 22px !important;
        }

        .layui-table-tool {
            min-height: 30px;
            line-height: 30px;
            padding: 5px 0px;
            border-width: 0 0 1px;
        }

        .layui-elem-field, .layui-table-view {
            margin: 0 !important;
        }

        .layui-table-view {
            border-color: #99bbe8;
        }

        .layui-card {
            margin-bottom: 15px;
            border-radius: 2px;
            background-color: #dfe8f6 !important;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
        }

        .layui-card-body {
            padding: 10px 5px !important;
        }

        .layui-table-tool-temp {
            padding-left: 5px !important;
        }

        .ew-tree-table-box {
            background-color: #ffffff;
        }

        .layui-input-sm {
            min-width: 130px;
            height: 30px;
        }

        .layui-form-item {
            margin-bottom: 10px !important;
        }

    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row">
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md3">
                <fieldset class="layui-elem-field layuimini-search">
                    <legend>查询面板</legend>
                    <div style="margin: 20px 0px 5px 0px">
                        <form class="layui-form" action="" lay-filter="queryUumUserForm" id="queryUumUserForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户属性:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="keyWords" placeholder="输入用户名、工号或姓名"
                                           value="" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户类别:</label>
                                <div class="layui-input-inline">
                                    <select name="peopleClass" value="">
                                        <option value="">请选择</option>
                                        <option value="1">医院职工</option>
                                        <option value="6">临时员工</option>
                                        <option value="2">培训讲师</option>
                                        <option value="7">自助终端</option>
                                        <option value="5">虚拟用户</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户状态:</label>
                                <div class="layui-input-inline">
                                    <select name="status" value="">
                                        <option value="">请选择</option>
                                        <option value="A">激活</option>
                                        <option value="D">作废</option>
                                        <option value="L">锁定</option>
                                    </select>
                                </div>
                            </div>
                            <div>
                                <div class="layui-input-block">
                                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit><i
                                            class="layui-icon layui-icon-search"></i>查询
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>
                <div class="layui-form layui-border-box layui-table-view">
                    <div class="search-header layui-table-tool">
                        <label class="layui-form-label">机构查询</label>
                        <div class="layui-input-inline">
                            <input class="layui-input search-input" type="text" id="inputCode" placeholder="关键词搜索"
                                   autocomplete="off">
                        </div>
                    </div>
                </div>
                <div class="layui-form layui-border-box layui-table-view">
                    <table id="organizationTable" class="layui-table" lay-filter="organizationTable"></table>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm8 layui-col-md9">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <table id="userTable" lay-filter="userTable"></table>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>

<div hidden="hidden" id="saveUumUserUi" style="padding: 2px">
    <div style="padding: 2px;border: 1px solid #99bbe8">
        <form class="layui-form" action="" lay-filter="saveUumUserForm" id="saveUumUserForm">
            <div class="layui-row" style="border: 1px solid #99bbe8;padding-top: 10px">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label required"><span style="color:red;">*</span>&nbsp;用户名:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userName" lay-verify="required" class="layui-input layui-input-sm">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required"><span style="color:red;">*</span>&nbsp;员工姓名:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="peopleName" lay-verify="required"
                                   class="layui-input layui-input-sm">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">人员职称:</label>
                        <div class="layui-input-inline">
                            <select name="workProfessional">
                                <option>请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">电子邮箱:</label>
                        <div class="layui-input-inline">
                            <input type="email" name="email" class="layui-input layui-input-sm">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">拼音码:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="pinyinCode" class="layui-input layui-input-sm">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">创建者:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="creator" disabled
                                   class="layui-input layui-input-sm layui-disabled">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">修改者:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="modifier" disabled
                                   class="layui-input layui-input-sm layui-disabled">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">上级人员:</label>
                        <div class="layui-input-inline">
                            <select name="superLeader">
                                <option>请选择</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label "><span style="color:red;">*</span>&nbsp;用户类别:</label>
                        <div class="layui-input-inline">
                            <select name="peopleClass" lay-verify="required">
                                <option>请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">人事科室:</label>
                        <div class="layui-input-inline">
                            <select name="workDept" lay-search>
                                <option>请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">移动电话:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="mobily" class="layui-input layui-input-sm">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label ">用户状态:</label>
                        <div class="layui-input-inline">
                            <select name="status" readonly disabled class="layui-disabled">
                                <option>请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">五笔码:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="wubiCode" class="layui-input layui-input-sm">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">创建时间:</label>
                        <div class="layui-input-inline">
                            <input type="date" name="createTime" disabled
                                   class="layui-input layui-input-sm layui-disabled">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">修改时间:</label>
                        <div class="layui-input-inline">
                            <input type="date" name="modifyTime" disabled
                                   class="layui-input layui-input-sm layui-disabled">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label required"><span style="color:red;">*</span>&nbsp;工号:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="peopleIdentifier" lay-verify="required"
                                   class="layui-input layui-input-sm">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label ">工作岗位:</label>
                        <div class="layui-input-inline">
                            <select name="workPost" readonly>
                                <option>请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label ">职务:</label>
                        <div class="layui-input-inline">
                            <select name="duty" readonly>
                                <option>请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">办公电话:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="officePhone" class="layui-input layui-input-sm">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">身份证号:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="idNo" class="layui-input layui-input-sm">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">有效期限:</label>
                        <div class="layui-input-inline">
                            <input type="date" name="expires" class="layui-input layui-input-sm">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">删除时间:</label>
                        <div class="layui-input-inline">
                            <input type="date" name="deleteTime" disabled
                                   class="layui-input layui-input-sm layui-disabled">
                        </div>
                    </div>
                </div>
            </div>

            <input type="text" name="id" hidden>

            <div style="padding-top: 5px;padding-bottom: 10px;">
                <div style="text-align: center">
                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm" type="reset">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/html" id="toolbar">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm data-refresh-btn layui-btn-primary" lay-event="refresh"><i
                class="layui-icon layui-icon-refresh"></i>刷新
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add"><i
                class="layui-icon layui-icon-add-1"></i>新增
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="update"><i
                class="layui-icon layui-icon-edit"></i>修改
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-primary data-delete-btn" lay-event="resetPassword"><i
                class="layui-icon layui-icon-password"></i>重置密码
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-primary data-delete-btn" lay-event="activate"><i
                class="layui-icon layui-icon-user"></i>激活
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-primary data-delete-btn" lay-event="locking"><i
                class="layui-icon layui-icon-pause"></i>锁定
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-primary data-delete-btn" lay-event="invalid"><i
                class="layui-icon layui-icon-delete"></i>作废
        </button>
    </div>
</script>

<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/js/pinyin.js"></script>
<script>
    layui.use(['form', 'table', 'layer', 'treeTable'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            treeTable = layui.treeTable,
            layer = layui.layer;
        var insTb;
        var size = {
            width: window.innerWidth || document.body.clientWidth,
            height: window.innerHeight || document.body.clientHeight
        }

        $(function () {
            insTb = treetableload();
            loadUserTable();
            loadSelect($('[name="status"]'), 'UUM0001');
            loadSelect($('[name="workPost"]'), 'TJ0043');
            loadSelect($('[name="workProfessional"]'), 'TJ0062');
            loadSelect($('[name="peopleClass"]'), 'UUM0002');
            loadSelect($('[name="duty"]'), 'TJ0061');
            $.get('/bds/getBdsOrganization', function (obj, status) {
                let html = $('[name="workDept"]').html();
                $.each(obj.data, function (index, item) {
                    html += '<option value=' + item.code + '>' + item.name + '</option>'
                })
                $('[name="workDept"]').html(html);
                form.render('select');
            });
        })

        $(document).on("click", ".layui-table-body table.layui-table tbody tr", function () {
            /*当单击表格行时,把单选按钮设为选中状态*/
            var tableDiv;
            var index = $(this).attr('data-index');
            var tableBox = $(this).parents('.layui-table-box');
            //存在固定列
            if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
                tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
            } else {
                tableDiv = tableBox.find(".layui-table-body.layui-table-main");
            }
            var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.layui-table-cell div.layui-form-radio I");
            if (checkCell.length > 0) {
                checkCell.click();
            }
        });
        //对td的单击事件进行拦截停止，防止事件冒泡再次触发上述的单击事件  将此代码在页面初始化后执行一次即可以。
        $(document).on("click", "td div.layui-table-cell div.layui-form-radio", function (e) {
            e.stopPropagation();
        });

        function loadSelect(obj, standardCode) {
            $.ajax({
                url: '/bds/getTableCodeItemByStandardCode',
                method: 'GET',
                data: {
                    standardCode: standardCode
                },
                success: function (result) {
                    let html = obj.html();
                    $.each(result.data, function (index, item) {
                        html += '<option value=' + item.itemValue + '>' + item.itemName + '</option>'
                    })
                    obj.html(html);
                    form.render('select');
                }
            });
        }

        //监听行单击事件
        treeTable.on('row(organizationTable)', function (obj) {
            $(obj.tr).parent().find('.layui-table-click').removeClass('layui-table-click');
            obj.tr.addClass('layui-table-click');
            insTb.expand(obj.data.id);
            insTb.setChecked([obj.data.id]);
            table.reload('userTable', {
                where: {
                    keyWords: null,
                    status: null,
                    peopleClass: null,
                    page: 1,
                    limit: 20,
                    organizationCode: obj.data.code
                }
            });
        });

        //树形表格重载
        function treetableload() {
            // 渲染表格
            return treeTable.render({
                elem: '#organizationTable',
                url: '/bds/getBdsOrganization',
                height: 'full-250',
                size: 'sm',
                skin: 'line',
                even: true,
                tree: {
                    iconIndex: 0,
                    isPidData: true,
                    idName: 'id',
                    pidName: 'parentId',
                    arrowType: 'arrow2',
                    getIcon: 'ew-tree-icon-style2'
                },
                cols: [ [
                    {field: 'name', width: '310px', title: '机构名称'},
                    {field: 'organizationtypeCode', title: '机构类型'},
                    {field: 'id', title: '主键ID', hide: true},
                    {field: 'code', title: '编码', hide: true},
                    {field: 'pinyinCode', title: '拼音码', hide: true},
                    {field: 'wubiCode', title: '五笔码', hide: true}
                ]],
                style: 'margin-top:0;',
                done: function (data, curr, count) {

                }
            });
        }

        function loadUserTable() {
            //方法渲染：
            table.render({
                elem: '#userTable',
                method: 'post',
                url: '/uum/getUumUser',
                toolbar: '#toolbar',
                defaultToolbar: [],
                page: true,
                limit: 20,
                cols: [ [
                    {type: 'radio', fixed: 'left'},
                    {type: 'numbers', fixed: 'left'},
                    {field: 'userName', title: '用户名', sort: true},
                    {
                        field: 'statusName', title: '账号状态', sort: true, templet: function (d) {
                            if (d.status == 'A') {
                                return '<span style="color: limegreen">激活</span>'
                            }
                            if (d.status == 'D') {
                                return '<span style="color: red">作废</span>'
                            }
                            if (d.status == 'L') {
                                return '<span style="color: yellow">锁定</span>'
                            }
                            return d.statusName;
                        }
                    },
                    {field: 'status', title: '账号状态值', sort: true, hide: true},
                    {field: 'peopleName', title: '员工姓名', sort: true},
                    {field: 'peopleIdentifier', title: '工号', sort: true},
                    {field: 'peopleClassName', title: '账号类型', sort: true},
                    {field: 'peopleClass', title: '账号类型值', sort: true, hide: true},
                    {field: 'workDeptName', title: '人事科室', sort: true},
                    {field: 'workDept', title: '人事科室值', sort: true, hide: true},
                    {field: 'workPostName', title: '工作岗位', sort: true},
                    {field: 'workPost', title: '工作岗位值', sort: true, hide: true},
                    {field: 'workProfessionalName', title: '职称', sort: true},
                    {field: 'workProfessional', title: '职称值', sort: true, hide: true},
                    {field: 'id', title: 'ID', sort: true, hide: true},
                    {field: 'expires', title: '有效期', sort: true, hide: true},
                    {field: 'mobile', title: '移动电话', sort: true, hide: true},
                    {field: 'officePhone', title: '办公电话', sort: true, hide: true},
                    {field: 'email', title: '邮箱', sort: true, hide: true},
                    {field: 'duty', title: '职务', sort: true, hide: true},
                    {field: 'idNo', title: '身份证号', sort: true, hide: true},
                    {field: 'pinyinCode', title: '拼音码', sort: true, hide: true},
                    {field: 'wubiCode', title: '五笔码', sort: true, hide: true},
                    {field: 'creator', title: '创建者', sort: true, hide: true},
                    {field: 'createTime', title: '创建时间', sort: true, hide: true},
                    {field: 'modifier', title: '修改者', sort: true, hide: true},
                    {field: 'modifyTime', title: '修改时间', sort: true, hide: true},
                    {field: 'createTime', title: '创建时间', sort: true, hide: true},
                    {field: 'createTime', title: '创建时间', sort: true, hide: true},
                    {field: 'createTime', title: '创建时间', sort: true, hide: true},
                    {field: 'createTime', title: '创建时间', sort: true, hide: true}
                ] ],
                size: 'sm',   //尺寸
                skin: 'line',  //line （行边框风格）  row （列边框风格） nob （无边框风格)
                height: 'full-50',
                even: true,  //隔行背景
                done: function (obj) {

                }
            });
        }

        form.on('submit(queryUumUserForm)', function (data) {
            let obj = form.val('queryUumUserForm');
            table.reload('userTable', {
                where: {
                    keyWords: obj.keyWords,
                    status: obj.status,
                    peopleClass: obj.peopleClass,
                    page: 1,
                    limit: 20
                }
            });
            return false;
        })

        var layerOpenIndex;

        form.on('submit(saveUumUserForm)', function (data) {
            let obj = form.val('saveUumUserForm');
            layer.close(layerOpenIndex);
            $.ajax({
                url: '/uum/saveUumUser',
                method: 'POST',
                data: form.val('saveUumUserForm'),
                success: function (data) {
                    layer.msg("保存成功！");
                    table.reload('userTable');
                }
            });
            return false;
        })


        function search() {
            var keywords = $('#inputCode').val();
            if (keywords) {
                if (typeof (keywords) === 'string') {
                    keywords = keywords.toUpperCase();
                }
                insTb.filterData(keywords);
            } else {
                insTb.clearFilter();
            }
        };

        $("#inputCode").on("input", function (e) {
            search();
        });

        function openSaveUumUserUi(title) {
            layerOpenIndex = layer.open({
                type: 1,
                title: title,
                skin: 'layui-layer-lan',
                area: size.width > 800 ? '60%' : '90%',
                content: $("#saveUumUserUi")
            });
        }

        // 头部工具栏点击事件
        table.on('toolbar(userTable)', function (obj) {
            let rowObj = table.checkStatus('userTable').data[0];
            switch (obj.event) {
                case 'refresh':
                    table.reload('userTable', {
                        page: 1,
                        limit: 20
                    });
                    break;
                case 'add':
                    $('#saveUumUserForm')[0].reset();
                    form.render();
                    openSaveUumUserUi("新增用户");
                    break;
                case 'update':
                    if (rowObj) {
                        form.val('saveUumUserForm', {
                            id: rowObj.id,
                            peopleName: rowObj.peopleName,
                            userName: rowObj.userName,
                            workDept: rowObj.workDept,
                            workPost: rowObj.workPost,
                            expires: rowObj.expires,
                            peopleClass: rowObj.peopleClass,
                            peopleIdentifier: rowObj.peopleIdentifier,
                            workProfessional: rowObj.workProfessional,
                            mobile: rowObj.mobile,
                            officePhone: rowObj.officePhone,
                            email: rowObj.email,
                            status: rowObj.status,
                            duty: rowObj.duty,
                            idNo: rowObj.idNo,
                            pinyinCode: rowObj.pinyinCode,
                            wubiCode: rowObj.wubiCode,
                            creator: rowObj.creator,
                            createTime: rowObj.createTime,
                            modifier: rowObj.modifier,
                            modifyTime: rowObj.modifyTime,
                            idNo: rowObj.idNo,
                        });
                        openSaveUumUserUi("用户编辑 - " + rowObj.peopleName);
                    } else {
                        layer.alert('请先选择要修改用户', {
                            icon: 2
                        })
                    }
                    break;
                case 'resetPassword':
                    if (rowObj) {
                        $.ajax({
                            url: '/uum/saveUumUser',
                            method: "post",
                            data: {
                                id: rowObj.id,
                                userPassword: '123456'
                            },
                            success: function () {
                                layer.msg("密码重置成功！");
                                table.reload('userTable');
                            }
                        });

                    }
                    break;
                case 'activate':
                    if (rowObj) {
                        $.ajax({
                            url: '/uum/saveUumUser',
                            method: "post",
                            data: {
                                id: rowObj.id,
                                status: 'A'
                            },
                            success: function () {
                                layer.msg("激活成功！");
                                table.reload('userTable');
                            }
                        });
                    }
                    break;
                case 'locking':
                    if (rowObj) {
                        $.ajax({
                            url: '/uum/saveUumUser',
                            method: "post",
                            data: {
                                id: rowObj.id,
                                status: 'L'
                            },
                            success: function () {
                                layer.msg("锁定成功！");
                                table.reload('userTable');
                            }
                        });
                    }
                    break;
                case 'invalid':
                    if (rowObj) {
                        $.ajax({
                            url: '/uum/saveUumUser',
                            method: "post",
                            data: {
                                id: rowObj.id,
                                status: 'D'
                            },
                            success: function () {
                                layer.msg("作废成功！");
                                table.reload('userTable');
                            }
                        });
                    }
                    break;
            }
        });

        //生成拼音码 五笔码
        $("[name='peopleName']").on("change", function (e) {
            $("[name='pinyinCode']").val(makePy(e.target.value));
            $("[name='wubiCode']").val(makeWb(e.target.value));
        });
    });
</script>

</body>
</html>
